<template>
  <div>
    日期选择器
    <el-date-picker v-model="value1" type="date" placeholder="选择日期">
    </el-date-picker>
    <div>
      单选框
      <el-radio v-model="radio" label="1">备选项</el-radio>
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </div>
    <div>
      单选框
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button type="text" @click="open">叫你点你就点</el-button>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
    <div>
      <span class="demonstration">默认 Hover 指示器触发</span>
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "elementUI",
  components: {
    //HelloWorld
  },
  data() {
    return {
      activeName: "second",
      value1: "",
      radio: "1",
      tableData: [
        {
          date: "2016-05-02",
          name: "rose",
          address: "重庆家乡",
        },
      ],
    };
  },
  methods: {
    open() {
      this.$alert("这里是空白提示", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
</style>
